<template>
  <div class="source_data_container p_20 mt_30">
    <div class="text_center fontsize_24 font_bold fontfamily_pingfang">数据准备</div>
    <div class="text_center color_ccc mt_18 fontfamily_yahei fontsize_14">数据准备阶段包含从原始数据到形成最终数据集的所有操作，包括：表、数据清洗和转换、语义层定义以及数据集定义。</div>
    <div class="source_data_content flex justify_around mt_30 ml_20">
      <div class="source_data_item text_center relative cursor_point" @click="handleShowDetail('api')">
        <div class="item-bg w_100 h_100 api_bg"></div>
        <div class="mask absolute left_0 right_0 bottom_0 text_center slide-all">
          <div class="taskbg"></div>
          <div class="content overflow_hidden h_100 slide-all"><span class="item-title">API</span>
            <p class="item-desc fontsize_14 color_ccc text_left mt_0 slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
      <div class="source_data_item text_center relative cursor_point" @click="handleShowDetail('sql')">
        <div class="item-bg w_100 h_100 sql_bg"></div>
        <div class="mask absolute left_0 right_0 bottom_0 text_center slide-all">
          <div class="taskbg"></div>
          <div class="content overflow_hidden h_100 slide-all"><span class="item-title m_0 p_0 inline_block">SQL</span>
            <p class="item-desc fontsize_14 color_ccc text_left mt_0 slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
      <div class="source_data_item text_center relative cursor_point" @click="handleShowDetail('csv')">
        <div class="item-bg w_100 h_100 csv_bg"></div>
        <div class="mask absolute left_0 right_0 bottom_0 text_center slide-all">
          <div class="taskbg"></div>
          <div class="content overflow_hidden h_100 slide-all"><span class="item-title m_0 p_0 inline_block">CSV</span>
            <p class="item-desc fontsize_14 color_ccc text_left mt_0 slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
      <div class="source_data_item text_center relative cursor_point" @click="handleShowDetail('etl')">
        <div class="item-bg w_100 h_100 etl_bg"></div>
        <div class="mask absolute left_0 right_0 bottom_0 text_center slide-all">
          <div class="taskbg"></div>
          <div class="content overflow_hidden h_100 slide-all"><span class="item-title m_0 p_0 inline_block">ETL</span>
            <p class="item-desc fontsize_14 color_ccc text_left mt_0 slide-all">快速查找、了解自己需要的数据资源，并且进行数据权限申请。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "my-data-index",
  setup() {
    const router = useRouter();
    const handleShowDetail = (val) => {
      router.push({ path: val });
    };
    return {
      handleShowDetail,
    };
  },
});
</script>

<style lang="less" scoped>
@import "source_data";
</style>